<template>


    <a-modal title="订单留言详情" :width="1200"
             :destroyOnClose="true" :maskClosable="false" :visible="visible"
             @cancel="handleCancel"
             @ok="handleCancel(true)">

        <a-row :gutter="[8,8]" style="background-color: #e8e8e8">

            <a-col :span="15">
                <div style="background-color: #ffffff">


                    <a-descriptions bordered :column="1">
                        <a-descriptions-item label="单据编号">
                            {{messageMain.id}}
                        </a-descriptions-item>

                        <a-descriptions-item label="问题类型">
                            {{ messageMain.type }}
                        </a-descriptions-item>


                        <a-descriptions-item label="留言时间">
                            {{messageMain.createTime}}
                        </a-descriptions-item>




                        <a-descriptions-item label="留言状态">
                            <span :class="'text-'+messageMain.status">


                            {{ $exMod.findDict(MessageStatusOPT, messageMain.status )}}
                           </span>
                        </a-descriptions-item>


                        <a-descriptions-item label="用户昵称">
                            {{messageMain.vipName}}
                        </a-descriptions-item>

                        <a-descriptions-item label="用户电话">
                            {{messageMain.vipPhone}}
                        </a-descriptions-item>



                        <a-descriptions-item label="留言内容">
                            {{messageMain.content}}

                        </a-descriptions-item>

                        <a-descriptions-item label="图片" v-if="!$exMod.isEmptyString(messageMain.picture)">
                            <a class="imageItemMx"
                               v-for=" index in  formatPicture(messageMain.picture)"
                               :key="index"
                               :href="index" target="_blank">
                                <img :src="index" width="100px"/>

                            </a>

                        </a-descriptions-item>

                    </a-descriptions>
                </div>
            </a-col>

            <a-col :span="9">
                <a-card title="消息回复">

                    <a-button slot="extra" type="primary"  @click="replyShow=true"  v-if="messageMain.status<2" >回复处理</a-button>
                    <div class="msgBox">
                        <a-timeline v-if="replyList.length>0">
                            <a-timeline-item v-for="(mxItem,mxId)  in replyList" :key="mxId">
                                <p class="text-success" v-if="!$exMod.isEmptyString(mxItem.vipId)">
                                    {{messageMain.vipName}}</p>
                                <p class="text-danger" v-else>{{mxItem.operatorName}}</p>
                                <p>{{mxItem.content}}</p>
                                <p v-if="!$exMod.isEmptyString(mxItem.picture)">
                                    <a class="imageItemMx"
                                       v-for=" index in  formatPicture(mxItem.picture)" :key="index"
                                       :href="index" target="_blank"><img :src="index" width="100px"/>
                                    </a>
                                </p>
                                <p class="font-size-12 text-aux">{{mxItem.createTime}}</p>
                            </a-timeline-item>


                        </a-timeline>
                    </div>
                </a-card>

            </a-col>
        </a-row>
        <reply v-if="replyShow" :mainId="record.id" @closeModal="closeReply"/>
    </a-modal>

</template>
<script>
    import {messageFind} from '../public/http.js';

    import {dictLoad} from "../../../util/internal.api";

    export default {
        props: ['record'],
        components: {
            reply: () => import('./reply')
        },
        data() {
            return {
                loading: false, //按钮Loading
                title: "问题详情",
                visible: true, //modal 显示状态
                messageMain: {},    //问题对象
                replyList: [], //回复列表

                form: {
                    type: 0,
                    picture: null,
                    content: null,
                },
                MessageStatusOPT: [],
                replyShow: false,

            };
        },
        methods: {

            closeReply(e) {
                this.replyShow = false;
                if (e.render) {
                    this.loadData();
                }
            },

            formatPicture(string) {
                if (string) {


                    return string.split(',');
                } else {
                    return [];
                }


            },

            //关闭弹窗
            handleCancel(render=false) {
                this.visible = false;
                this.$emit('closeModal', {
                    render: render
                });
            },


            loadData() {
                messageFind(this.record.id).then(res => {
                    if (res.code === 0) {
                        this.messageMain = res.data.result;
                        this.replyList = res.data.replyList;
                    }

                })
            },

            async init() {
                await dictLoad("ArticleMessageStatus").then(res => this.MessageStatusOPT = res);
                await this.loadData();
            },


        },
        created() {  this.init();}
    };
</script>


<style lang="scss" scoped>


    .msgBox {
        padding-top: 20px;
        max-height: 450px;
        overflow-y: scroll;
    }


    .imageItemMx {
        max-width: 100px;
        max-height: 80px;
        overflow: hidden;
        padding: 4px;
    }


</style>